<template>
  <div class="m-home-container">
    <header>
      <router-link :to="{name: 'm-home'}">文章</router-link>
    </header>

    <!--<swiper class="banner" :options="swiperOption" ref="mySwiper">
      &lt;!&ndash; slides &ndash;&gt;
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      <swiper-slide>I'm Slide 5</swiper-slide>
      <swiper-slide>I'm Slide 6</swiper-slide>
      <swiper-slide>I'm Slide 7</swiper-slide>
    </swiper>-->

    <my-swipe class="my-swipe">
      <my-swipe-item class="slide1">1</my-swipe-item>
      <my-swipe-item class="slide2">2</my-swipe-item>
      <my-swipe-item class="slide3">3</my-swipe-item>
    </my-swipe>

    <ve-line :data="chartData"></ve-line>

    <div v-if="articles.length === 0" class="empty">
      暂无数据！
    </div>
    <ul v-else class="list">
      <li v-for="(item, index) in articles" :key="index">
        <div class="title">标题</div>
        <div class="description">描述</div>
        <!--<img src="../../assets/images/icon/del.svg">-->
        <img class="del" :src="delICon">
      </li>
    </ul>

  </div>
</template>

<script>
import delICon from '../../assets/images/icon/del.svg'
import { Toast } from 'mint-ui';

import 'swiper/dist/css/swiper.css'

// import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Swipe, SwipeItem } from 'vue-swipe';

export default {
  name: 'MHome',
  /*components: {
    swiper,
    swiperSlide
  },*/
  components: {
    mySwipe: Swipe,
    mySwipeItem: SwipeItem
  },
  data() {
    return {
      articles: [0, 0, 0],
      delICon,
      swiperOption: {},
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      }
    }
  },
  computed: {
    /*swiper() {
      return this.$refs.mySwiper.swiper
    }*/
  },
  mounted() {
    Toast({
      message: '提示',
      position: 'middle',
      duration: 5000
    });
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
  }
}
</script>

<style lang="scss" scoped>
.m-home-container {
  header {
    height: .5rem;
    background: #ffaaaa;
    display: flex;
    align-items: center;
    padding: 0 .2rem;

    a {
      font-size: .2rem;
    }
  }

  .banner {
    height: 1rem;

    .swiper-button-prev {
      width: 10px;
    }
  }

  .my-swipe {
    height: 200px;
    color: #fff;
    font-size: 30px;
    text-align: center;
  }

  .slide1 {
    background-color: #0089dc;
    color: #fff;
  }

  .slide2 {
    background-color: #ffd705;
    color: #000;
  }

  .slide3 {
    background-color: #ff2d4b;
    color: #fff;
  }

  .empty {
    text-align: center;
    margin: 1rem 0;
    font-size: .2rem;
    color: #aaa;
  }

  .list {
    li {
      height: .8rem;
      padding: 0 .2rem;
      border-bottom: .01rem solid #aaa;
      position: relative;

      .title {
        height: .4rem;
        line-height: .4rem;
        font-size: .2rem;
      }

      .description {
        height: .4rem;
        line-height: .2rem;
        font-size: .16rem;
      }

      .del {
        width: .3rem;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        right: .3rem;
      }
    }
  }
}
</style>